<template>
  <div class="pie-chart-container">
    <div ref="chart" class="chart-wrapper"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PieChartComponent',
  props: {
    title: {
      type: String,
      default: '饼图组件模版'
    },
    data: {
      type: Array,
      default() {
        return [
          { name: '产品A', value: 28 },
          { name: '产品B', value: 35 },
          { name: '产品C', value: 22 },
          { name: '产品D', value: 40 },
          { name: '产品E', value: 18 },
          { name: '产品F', value: 30 },
          { name: '产品G', value: 25 }
        ]
      }
    },
    fixTotal: {
      type: Number,
      default: 0
    },
    statics_name: {
      type: String,
      default: '单位(元)'
    }
  },
  data() {
    return {
      chart: null,
      // 鲜艳莫兰迪配色（12色）
      colors: [
        '#E8C4C4', '#C8A2C8', '#8DB3E2', '#A2CDCD',
        '#90EE90', '#F0E68C', '#FFB6C1', '#D2B48C',
        '#DEB887', '#FFA07A', '#98FB98', '#20B2AA'
      ]
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.updateChart(this.data) // 使用统一的更新方法
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    updateChart(data) {
      if (this.chart) {
        // 统一处理数据：无论是否使用固定总数，都先标准化数据格式
        let processedData = data.map(item => ({
          name: item.name,
          value: item.value,
          // 保留原始值用于展示
          originalValue: item.value,
          percentage: item.percentage
        }));

        // 统一的配置项，通过条件判断动态修改差异部分
        const option = {
          backgroundColor: 'transparent',
          title: {
            text: this.title,
            left: 'center',
            top: 10,
            textStyle: {
              color: '#555',
              fontSize: 16,
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'item',
            // 根据是否有固定总数，动态设置格式化函数
            formatter: function (params) {
              // 解构获取参数里的系列名、数据项名称、数值，以及当前数据项对象
              const { seriesName, name, value, data } = params;
              // 定义要显示的占比变量
              let percentageToShow;
              // 判断当前数据项是否有自定义的 percentage 属性
              if (data && data.percentage !== undefined) {
                // 有自定义 percentage，将其转换为保留一位小数的百分比字符串
                percentageToShow = (data.percentage * 100).toFixed(1) + '%' + "-占总额";
              } else {
                // 没有自定义 percentage，使用 ECharts 自动计算的占比（params.percent 就是自动计算的占比数值）
                percentageToShow = params.percent.toFixed(1) + '%';
              }
              // 拼接并返回提示框内容
              return `${seriesName} <br/>${name}: ${value} (${percentageToShow})`;
            },
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            borderColor: '#eee',
            borderWidth: 1,
            textStyle: {
              color: '#333'
            },
            padding: 10,
            borderRadius: 4
          },
          legend: {
            left: 10,
            top: 'center',
            orient: 'vertical',
            textStyle: {
              color: '#666',
              fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12,
            itemGap: 15,
            align: 'left'
          },
          series: [
            {
              name: this.statics_name,
              type: 'pie',
              radius: ['40%', '70%'], // 饼图内外半径
              center: ['50%', '50%'],
              // 移除玫瑰图配置
              itemStyle: {
                borderRadius: 4,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: true,
                position: 'outside',
                formatter: '{b}: {c} ({d}%)',
                fontSize: 11
              },
              labelLine: {
                show: true,
                length: 20,
                length2: 10
              },
              data: processedData, // 使用处理后的数据
              color: this.colors
            }
          ]
        };

        this.chart.setOption(option);
      }
    }
  },
  watch: {
    data: {
      handler(newData) {
        this.updateChart(newData)
      },
      deep: true
    },
    fixTotal: {
      handler(newtotal) {
        this.updateChart(newtotal)
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.pie-chart-container {
  width: 100%;
  height: 100%;
  padding: 10px;
  position: relative;
}

.chart-wrapper {
  width: 100%;
  height: 100%;
}
</style>